<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="loader">
			<span>LOVEYOU</span>
			<span>LOVEYOU</span>
		</div>
		<style>
			body{
				margin: 0;
				padding: 0;
				background: #ffff3a;
				font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
				font-weight: bold;
			}
			
			.loader{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				border: 5px solid #000;
				overflow: hidden;
			}
			
			.loader span{
				position: absolute;
				top: 0;
				left: 0;
				width:100%;
				font-size: 48px;
				text-transform: uppercase;
			}
			
			.loader span:nth-child(1){
				-webkit-clip-path: polygon(0% 0%,100% 0%,100% 52%,0% 53%);
				clip-path: polygon(0% 0%,100% 0%,100% 52%,0% 53%);
				animation: donghua1 5s infinite linear;
			}
			@keyframes donghua1{
				0%{
					transform: translateX(100%);
				}
				35%{
					transform: translateX(0%);
				}
				50%{
					transform: translateX(0%);
				}
				65%{
					transform: translateX(0%);
				}
				100%{
					transform: translateX(-100%);
				}
			}
			.loader span:nth-child(2){
				-webkit-clip-path: polygon(0% 100%,100% 100%,100% 52%,0% 53%);
				clip-path: polygon(0% 100%,100% 100%,100% 52%,0% 53%);
				animation: donghua2 5s infinite linear;
			}
			@keyframes donghua2{
				0%{
					transform: translateX(-100%);
				}
				35%{
					transform: translateX(0%);
				}
				50%{
					transform: translateX(0%);
				}
				65%{
					transform: translateX(0%);
				}
				100%{
					transform: translateX(100%);
				}
			}
		</style>
	</body>
</html>